<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<th:block th:include="oly/cms/article/article_edit_include :: editHead" />
	<th:block th:include="include :: oly_markdown_css" />
</head>
<body class="white-bg" >
	<h1 style="display: inline-block;padding-left: 10px;">文章修改</h1>

	<th:block th:include="oly/cms/article/article_edit_include :: editForm(edit='mark',article=${article})" />
	<th:block th:include="oly/cms/article/article_edit_include :: editFooter(articleSummary=${article.articleSummary})" />
	<th:block th:include="include :: oly_markdown_js" />
	<th:block th:include="oly/cms/article/article_edit_include :: editCommonJs" />

	<script type="text/javascript" th:inline="JavaScript">

		/* 初始化富文本编辑器 */
		var editor = editormd("editor", {
			width: "100%",
			height: 740,
			path: '/ajax/libs/oly_markdown/lib/',
			theme: "dark",
			previewTheme: "dark",
			editorTheme: "pastel-on-dark",
			markdown: '',
			tex              : true,
            emoji            : true,
            taskList         : true,
            codeFold         : true,
            searchReplace    : true,
            flowChart        : true,
            sequenceDiagram  : true,
			//syncScrolling : false,
			saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
			searchReplace: true,
			//watch : false,                // 关闭实时预览
			htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启     
			//toolbar  : false,             //关闭工具栏
			//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
			emoji: true,
			taskList: true,
			tocm: true,         // 生成TOCM]
			toc: true,           // 生成[TOC]
			tocTitle: "目录",     //生成面包有效
			tex: true,                   // 开启科学公式TeX语言支持，默认关闭
			flowChart: true,             // 开启流程图支持，默认关闭
			sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
			//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
			//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
			//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
			//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
			//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
			imageUpload: true,
			imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL: prefix + '/articleImgByMarkdown',
			onload: function () {
			
				//this.fullscreen();
				//this.unwatch();
				//this.watch().fullscreen();

				//this.setMarkdown("#PHP");
				//this.width("100%");
				//this.height(480);
				//this.resize("100%", 640);
			}
		});

		$("#editOk").click(function () {
			if ($("input[name='cats']").val() === '') {
				layer.msg('请选择一个分类', { icon: 6 })
			}
			else if ($.validate.form("form-article-edit")) {
				//获取编辑内容
				let editorData = editor.getPreviewedHTML();
				let editMark = editor.getMarkdown();
				layer.open({
					title: "确认信息",
					area: ['600px', '600px'],
					type: 1,
					content: $("#editTemplate").html(),
					success: function () {
						$.imageUpload.init(imgConfig);
						//填充图片
						var imgs = chooseImg(editorData);
						if (imgs.length > 0) {
							$.each(imgs, function (i, val) {
								let ii=readyChooseImg.indexOf(val);
								if (ii== -1) {
									$("#chooseImgBox").append("<img class='ophide' src='" + val + "' />");
								}
								else{
									$("#chooseImgBox").append("<img class='opshow' src='" + val + "' />");
								}
							})
						}

						if(readyChooseImg.length>0){
							$.each(readyChooseImg, function (i, val) {
								let ii=imgs.indexOf(val);
								if (ii== -1) {
									$("#chooseImgBox").append("<img class='opshow' src='" + val + "' />");
								}
							})
						}
						
	                    //初始化选择事件
						$("#chooseImgBox").on('click','img',function(){
							if ($(this).hasClass("opshow")) {
								$(this).removeClass("opshow");
								$(this).addClass("ophide");
								return;
							}
							if ($(this).hasClass("ophide") && $(".opshow").length < maxPhoto) {
								$(this).removeClass("ophide");
								$(this).addClass("opshow");
								return;
							} else {
								layer.msg('最多选择' + maxPhoto + '张', {
									icon: 6
								})
							}
						});

						$("#uploadImg").on("imgUploaded", function (e, msg) {
							var rs=msg.data.domain + msg.data.fk;
							imgs.push(rs);
							$("#chooseImgBox").append("<img class='ophide' src='" + rs + "' />")
						});

						//初始化提交
						$("#saveArticle").click(function () {
							$("#editor").remove();	
							let data = $('#form-article-edit').serializeArray();
							var imgData= getImgSrc($(".opshow"));
							if (imgData.length> 0) {
								data.push({ "name": "articleImg", "value": imgData.join(",") });
							}
							data.push({ "name": "articleMd", "value": editMark });
							data.push({ "name": "articleContent", "value": editorData });
							data.push({ "name": "articleBuild", "value": 1 });
							data.push({ "name": "articleSummary", "value": $("#articleSummary").val() });
							console.log(data);
							$.operate.saveTab(prefix + "/edit",data);
							layer.closeAll();
						});
					}
				});
			}
			else {
				layer.msg('表单验证未通过', { icon: 6 });
			}
		});

		
	</script>
</body>

</html>